:root {
  /* 主题色 */
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;

  /* 文字颜色 */
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #C0C4CC;

  /* 边框颜色 */
  --border-color: #DCDFE6;
  --border-light: #E4E7ED;
  --border-lighter: #EBEEF5;

  /* 背景颜色 */
  --bg-color: #FFFFFF;
  --bg-color-page: #F2F3F5;

  /* 字体大小 */
  --font-size-large: 18px;
  --font-size-medium: 16px;
  --font-size-base: 14px;
  --font-size-small: 13px;
  --font-size-mini: 12px;

  /* 间距 */
  --spacing-large: 24px;
  --spacing-medium: 16px;
  --spacing-base: 12px;
  --spacing-small: 8px;
  --spacing-mini: 4px;

  /* 圆角 */
  --border-radius-base: 4px;
  --border-radius-small: 2px;
  --border-radius-round: 20px;
  --border-radius-circle: 100%;

  /* 阴影 */
  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12);
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  /* 布局 */
  --sidebar-width: 200px;
  --sidebar-collapsed-width: 64px;
  --header-height: 80px;
  --main-container-height:calc(100vh - var(--header-height));
}